<template>
	<view class="contents">
		<view class="header">
			<view class="withdrawal_amount">
				<view class="title">
					可提现金额(元)
				</view>
				<view class="money">
					{{brokerage_price}}
				</view>
			</view>
			<view class="today_details">
				<view class="earnings">
					<view class="numerical">
						{{integralinformation.income}}
					</view>
					<view class="title">
						今日收益
					</view>
				</view>
				<view class="order">
					<view class="numerical">
						{{integralinformation.order_count}}
					</view>
					<view class="title">
						今日订单
					</view>
				</view>
				<view class="number">
					<view class="numerical">
						{{integralinformation.spread_count}}
					</view>
					<view class="title">
						新增人数
					</view>
				</view>
			</view>
		</view>
		<view class="middle">
			<view class="left">
				<view class="zhengti" @click="gotoWithdrawal">
					<view class="icon">
						<image src="../../static/tixian.png" mode="widthFix"></image>
					</view>
					<view class="title">
						佣金提现
					</view>
				</view>

			</view>
			<view class="fenggexian">

			</view>
			<view class="right" @click="gotoWithdrawalRecord">
				<view class="zhengti">
					<view class="icon">
						<image src="../../static/jilu.png" mode="widthFix"></image>
					</view>
					<view class="title">
						提现记录
					</view>
				</view>

			</view>
		</view>
		<view class="bottom">
			<view class="content" v-for="(item,index) in promotiondata" :key="index" @click="gotoDetail(item.pid)">
				<view class="left">{{item.title}}</view>
				<view class="middle"></view>
				<view class="right">
					<image src="../../static/rightarrow.png" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		promoteData,
		withdrawalPage
	} from '@/api/api.js'
	export default {
		data() {
			return {
				promotiondata: [{
						pid: 0,
						title: '专题推广',
						url: '/myIndex/specialPromotion/specialPromotion'
					},
					{
						pid: 1,
						title: '我的推广',
						url: '/myIndex/myPromotion/myPromotion'
					},
					{
						pid: 2,
						title: '佣金明细',
						url: '/myIndex/commissionSubsidiary/commissionSubsidiary'
					}
				],
				integralinformation: {
					income: 0,
					order_count: 0,
					spread_count: 0
				},
				brokerage_price:0
			}
		},
		onLoad() {
			// 推广数据
				promoteData().then(res => {
					console.log(res)
					if (res.data.code == '200') {
						this.integralinformation = res.data.data
					} else {}
					// console.log(this.integralinformation)
				})
				
		},
		onShow() {
			this.withdrawalPage()
		},
		methods: {
			gotoDetail(index) {
				uni.navigateTo({
					url: this.promotiondata[index].url
				})
			},
			// 跳转到提现页面
			gotoWithdrawal() {
				uni.navigateTo({
					url: '/myIndex/commissionWithdrawal/commissionWithdrawal'
				})
			},
			// 跳转到提现记录页面
			gotoWithdrawalRecord() {
				uni.navigateTo({
					url: '/myIndex/withdrawalRecord/withdrawalRecord'
				})
			},
			// 提现信息--可提现金额
			withdrawalPage() {
				let that = this
				withdrawalPage().then(res => {
					if (res.data.code == '200') {
						that.brokerage_price = res.data.data.brokerage_price
						if (that.brokerage_price == null) {
							that.brokerage_price = 0.00
						}
					} else {}
				})
			}
		}
	}
</script>

<style lang="scss">
	.contents {
		width: 100%;
		min-height: 100vh;
		background-color: rgb(247, 249, 252);

		.header {
			width: 100%;
			height: 420rpx;
			color: #fff;
			background-color: #3ACC98;

			.withdrawal_amount {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				padding-top: 56rpx;

				.title {
					font-size: 24rpx;
				}

				.money {
					font-size: 80rpx;
					font-weight: 600;
					margin: 32rpx auto;
				}
			}

			.today_details {
				display: flex;
				justify-content: space-around;
				margin-top: 32rpx;

				>view {
					display: flex;
					flex-direction: column;
					align-items: center;
				}

				.title {
					font-size: 24rpx;
				}
			}
		}

		.middle {
			display: flex;
			background-color: #fff;
			height: 100rpx;
			width: 100%;
			color: #3ACC98;
			font-weight: 600;

			.fenggexian {
				width: 2rpx;
				background-color: #999;
				height: 100%;
			}

			.left,
			.right {
				display: flex;
				flex: 1;
				align-items: center;

				.zhengti {
					display: flex;
					align-items: center;
					margin: 0 auto;

					.icon {
						width: 32rpx;
						height: 32rpx;
						margin-right: 16rpx;

						image {
							width: 100%;
							height: 100%;
						}
					}

					.title {
						font-size: 28rpx;
					}
				}

			}

		}

		.bottom {
			margin-top: 20rpx;

			.content {
				font-size: 28rpx;
				background-color: #fff;
				padding: 0 20rpx;
				border-bottom: 2rpx solid rgb(247, 249, 252);
				display: flex;
				align-items: center;

				.middle {
					flex: 1;
				}

				.left {
					width: 120rpx;
				}

				.right {
					color: #999999;
					width: 280rpx;
					text-align: right;
					display: flex;
					flex-direction: row-reverse;
					align-items: center;

					image {
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
	}
</style>
